<!--
 * @Author: 汪圣哲 wanghist061@163.com
 * @Date: 2024-03-06 17:44:58
 * @LastEditors: 汪圣哲 wanghist061@163.com
 * @LastEditTime: 2024-03-07 00:16:43
 * @FilePath: \my_backstage\src\components\Tag.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="tag">
        <el-tag v-for="(tag, index) in tags" :key="tag.path" :effect="tag.name === $route.name ? 'dark' : 'plain'"
            :closable="tag.name !== 'home'" @click="changeMenu(tag)" @close="handleClose(tag, index)">
            {{ tag.text }}
        </el-tag>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    methods: {
        changeMenu(item) {
            this.$router.push({ name: item.name })
        },
        handleClose(item, index) {
            this.$store.commit('CloseTag', item)
            if (item.name === this.$route.name) {
                const length = this.tags.length
                if (length === index) {
                    this.$router.push({ name: this.tags[index - 1].name })
                }
                else {
                    this.$router.push({ name: this.tags[index].name })
                }
            }
        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabList
        })
    }
}
</script>

<style scoped>
.tag {
    margin-top: 30px;
    margin-left: 20px;
}

.el-tag {
    margin-right: 10px;
}
</style>